<template>
  <div style="width: 98%;margin: auto;">
	   <div class="container">
		   <div class="rtl">
			   <br class="hidden-xs-only">
				<el-alert
					:center="true"
					:closable="false"
				    :title="tamsil_text"
				    type="error"
				    description="ئۇيغۇرچە-خەنزۇچە-ئېنگىلىزچە ئۈچ خىل تىلدا تەرجىمە ئېلىپ بارالايسىز، باشقا ئىقتىدارلار لازىم بولسا داۋاملىق قوشساق بولىدۇ">
				</el-alert>
				<br><br>
		   </div>
		   <el-row style="text-align: center;" type="flex" justify="center">
			   <el-col :xs="24" :sm="8">
				   <el-radio-group @input="getLang" v-model="lang">
					 <el-radio label="en">ئېنگىلىزچە</el-radio>
					 <el-radio label="zh">خەنزۇچە</el-radio>
					 <el-radio label="uy">ئۇيغۇرچە</el-radio>
				    </el-radio-group>
			   </el-col>
		   </el-row>
		   <br class="hidden-sm-and-up">
		   <el-row>
		     <el-col :span="24">
					<Title name="ئەسلى تېكىست:">
						<template v-slot:obj1>
						    <el-button class="el-btn" @click="getData" type="primary">تەرجىمە قىلىش</el-button>
						</template>
					</Title>
		   			<TextArea :row="6" :dir="dir" @parentChange="oldTextChange" v-model="old_text" plc="تەرجىمە قىلماقچى بولغان تېكىستنى كىرگۈزۈڭ"></TextArea>
		   		</el-col>
		   </el-row>
	   </div>
	   <el-row class="list" :gutter="20">
		  <el-col :xs="24" :sm="12">
			<Title name="تەرجىمىسى:"></Title>
			<TextArea :row="10" :dir="dir1" v-model="result1" plc="تەرجىمە نەتىجىسى"></TextArea>
		  </el-col>
		  <el-col v-if="inyin_show" :xs="24" :sm="12">
		   <Title name="پىنيىنچىسى:"></Title>
		   <TextArea :row="10" v-model="pinyin" plc="پىنيىنچىسى"></TextArea>
		  </el-col>
	   </el-row>
	   <el-row class="hidden-xs-only">
		   <el-col :sm="24">
			<Title name="زاپاس رامكا"></Title>
			<TextArea :row="10" :dir="dir1" plc="بۇيەردە تېكىستلەرنى تەھرىرلەش ئېلىپ بارسىڭىز بولىدۇ"></TextArea>
		   </el-col>
	   </el-row>
	   <br>
	   <div class="container">
		   <el-alert
		       :center="true"
			   :closable="false"
		       :title="'ئۇيغۇرچە-خەنزۇچە-ئېنگىلىزچە تەرجىمە سۇپىسى. نەشىرى:'+version"
		       type="info"
		       description="https://happynur.gitee.io/terjiman">
		   </el-alert>
	   </div>
  </div>
</template>

<script>
	const key = "a8a17df6e4a80b5fbe84f12096353df8";
	
	import axios from 'axios' 
	import Title from "./title.vue"
	import TextArea from "./TextArea.vue"
	import { Loading } from 'element-ui';
	
	import { TransformWithTone } from "/utilis/pinyin.js"
	import { tamsil } from "/utilis/tamsil"
	let offset = 500;
	export default {
	  name: 'HelloWorld',
	  components:{
		  Title,
		  TextArea
	  },
	  data(){
		 return {
			 version:" 1.0.1",
			 lianjiefu:"",
			 old_text:"",
			 result1:"",
			 result2:"",
			 data:{
				 from:"zh",
				 to:"uy"
			 },
			 dir:"ltr",
			 dir1:"rtl",
			 pinyin:"",
			 zh_text:"",
			 inyin_show:true,
			 tamsil_text:"",
			 lang:"zh"
		 }
	  },
	  created() {
		this.setTamsil()
	  },
	  methods:{
		  async getData(){
			  this.setTamsil()
			  this.inyin_show = true;
			  let obj_text = this.old_text;
			  if(!obj_text || obj_text==""){
				   this.$message({
					message: 'تەرجىمە قىلىدىغان تېكىستنى تولدۇڭ',
					type: 'error',
					center:true,
					offset
				  });
				  return;
			  }
			  let load1 = Loading.service({ fullscreen: true,lock:true });
			  let xiaoNiuApi = `https://api.niutrans.com/NiuTransServer/translation?from=${this.data.from}&to=${this.data.to}&apikey=${key}&src_text=${encodeURI(obj_text)}`;
			  let newTranslateApi = "https://cloudtranslation.com/nmt";/* https://cloudtranslation.com */
			  let apiRes = await axios.get(xiaoNiuApi);
			  load1.close()
			  this.result1 = this.lianjiefu + apiRes.data.tgt_text;
			  //end result1
			  /*pinyin处理*/
			  if(this.data.from ==="zh"){
			  	this.zh_text = obj_text;
			  }/*end if*/
			  if(this.data.from ==="uy"){
			  	this.zh_text = this.result1;
			  }/*end if*/
			  this.pinyin = TransformWithTone(this.zh_text);
			  if(this.data.from ==="en"){
				  this.dir = "ltr"
				  this.dir1 = "rtl"
				  this.data.from = "en"
				  this.data.to = "zh"
				  this.lianjiefu = this.result1 + "\n\n\n";
				  this.getData();
				  this.data.from = ""
				  this.inyin_show = true;
			  }
			  this.$message({
				message: 'تەرجىمە تامام',
				type: 'success',
				center:true,
				offset
			  });
		  },
		  oldTextChange(text){
			  this.lianjiefu = "";
			  this.result1 = "";
			  text = text.trim().substr(0,1);
			  let pattern_uy = /[\u0600-\u06ff]/; //维吾尔文
			  let pattern_zh = /[\u4e00-\u9fa5]/; //汉语
			  let pattern_en = /[A-Za-z]/; 	   //英文
			  if(pattern_uy.test(text)){//维吾尔文
				  this.common("uy")
			  }
			  if(pattern_zh.test(text)){//汉语
				  this.common("zh")
			  }
			  if(pattern_en.test(text)){//英文
			      this.common("en")
			  }
		  },
		  setTamsil(){
			  let tamsil_random = Math.floor(Math.random()*tamsil().length);
			  this.tamsil_text = tamsil()[tamsil_random];
		  },
		  getLang(){
			  this.setTamsil()
			  this.common(this.lang);
			  this.result1 = "";
			  this.lianjiefu = "";
		  },
		  common(lang = "zh"){
			  this.lang = lang;
			  if(lang==="uy"){//维吾尔文
				  this.dir = "rtl"
				  this.dir1 = "ltr"
				  this.data.from = "uy"
				  this.data.to = "zh"
			  }
			  if(lang==="zh"){//汉语
				  this.dir = "ltr"
				  this.dir1 = "rtl"
				  this.data.from = "zh"
				  this.data.to = "uy"
			  }
			  if(lang==="en"){//英文
			      this.dir = "ltr"
				  this.dir1 = "rtl"
				  this.data.from = "en"
				  this.data.to = "uy"
			  }
		  }
	  }
	}
</script>


<style scoped>
	/* 小于768px */
	@media screen and (max-width: 768px) {
	   .container{
			margin: auto;
			width: 98%;
	   }
	}
	/* 大于768px */
	@media screen and (min-width: 768px) {
	   .container{
			margin: auto;
			width: 768px;
	   }
	   .list{
	   	display: flex;
	   	flex-direction: row-reverse;
	   }
	}
	/* 大于1200px */
	@media screen and (min-width: 1200px) {
	   .container{
			width: 1200px;
	   }
	}
	/* 大于1400px */
	@media screen and (min-width: 1400px) {
	   .container{
			width: 1400px;
	   }
	}
	.el-btn{
		float: left;
	}
	.grid-content .el-textarea{
		font-size: 16px;
	}

</style>
